<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>视频监控</title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css" />
		<style>
			html, body {
				background-color: #F5F6F6;
			}
			.header {
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				background-color: #1abc9c;
				height: 50px;
			}
			.header div {
				line-height: 50px;
				height: 50px;
				width: 80%;
				margin-left: auto;
				margin-right: auto;
			}
			.voido_select {
				width: 78%;
				height: 28px;
				border: 1px solid #fff;
				outline: none;
				vertical-align: middle
			}
			.voido_button {
				width: 20%;
				border: 1px solid #fff;
				height: 28px;
				font-size: 12px;
				color: #fff;
				outline: none;
			}
			.shexiangtou ul li {
				width: 100%;
				background-color: #fff;
				padding: 3px 0px 8px 0px;
				background-image: url(../image/jiankong.png);
				background-size: 30px;
				background-position: right 15px center;
				background-repeat: no-repeat;
				border-bottom: 1px solid #F5F6F6;
				height: 56px;
			}
			.shexiangtou ul li p {
				padding-left: 5px;
			}
			.shexiangtou ul li p:nth-child(1) b {
				border-left: 3px solid #1abc9c;
				padding-left: 5px;
			}
			.shexiangtou ul li p:nth-child(2) {
				font-size: 12px;
				color: #555555;
				width: 80%;
				padding-top: 1px;
			}
			td {
				border: 1px solid transparent !important;
			}
		</style>
	</head>
	<body>
		<header id="videolists">
			<!-- <div class="header">
			<div>
			<select class="voido_select"></select>
			<button class="voido_button">
			搜索
			</button>
			</div>
			</div> -->
			<table class="table table-striped" >
				<tbody id="videolists" >
					<tr  v-for="(value,index) in video" @click="openWin(value.deviceSerial,value.channelName,value.channelNo)">
				<td>{{index+1}}</td>
					<td v-text="value.channelName"></td>
						<td v-if="value.deviceType=='CS-C5C-3B1WFR'"><img style="width: 30px;height: 30px" src="../../image/jiankong.png"></td>
						<td v-if="value.deviceType!='CS-C5C-3B1WFR'"><img style="width: 30px;height: 30px" src="../../image/qiuji.png"></td>
					</tr>
				</tbody>
			</table>
			<!--<div class="shexiangtou">
			<ul id="videolists">
			<li v-for="(value,index) in video" @click="openWin(value.deviceSerial,value.deviceType)"
			:style="{backgroundImage:`url(${value.deviceType=='CS-C5C-3B1WFR'?qiuji:qiangji})`}">
			<p>
			<b v-text="value.deviceName"></b>
			</p>
			<br>
			<p v-text="value.deviceName"></p>
			</li>
			</ul>
			</div>-->
		</header>
	</body>
	<script type="text/javascript" src="../../script/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/vue.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/video.js"></script>
	<script>
		apiready = function() {
			var app = new Vue({
				el : '#videolists',
				data : {
					video : [],
					qiuji : '../../image/jiankong.png',
					qiangji : '../../image/qiuji.png'
				},
				created : function() {
					try {
						api.ajax({
							url : 'https://open.ys7.com/api/lapp/camera/list',
							method : 'post',
							data : {
								values : {
									"accessToken" : $api.getStorage('videoaccessToken').data.accessToken,
									"pageStart": 0,
									"pageSize": 50
								}
							}
						}, function(ret, err) {
							console.log(JSON.stringify(ret))
							for (var i = 0; i < ret.data.length; i++) {
								app.video.push(ret.data[i]);
							}
						});
					} catch (err) {
						console.log(err);
						redobd();
						api.ajax({
							url : 'https://open.ys7.com/api/lapp/token/get',
							method : 'post',
							data : {
								values : {
									"appKey" : '45a4d5c6aece4178818da135ed84dbaf',
									"appSecret" : '670fcd955873dc253b106213df288a5b'
								}
							}
						}, function(ret, err) {
							$api.setStorage('videoaccessToken', ret);
							$api.setStorage('sessionTime', new Date().getTime());
							api.ajax({
								url : 'https://open.ys7.com/api/lapp/device/list',
								method : 'post',
								data : {
									values : {
										"accessToken" : $api.getStorage('videoaccessToken').data.accessToken
									}
								}
							}, function(ret, err) {
								for (var i = 0; i < ret.data.length; i++) {
									app.video.push(ret.data[i]);
								}
							});
							//alert(JSON.stringify(ret))
							//coding...
						});
					}
				},
				methods : {
					openWin : function(Serial, deviceType,chon) {
						api.openWin({
							name : 'video_window',
							url : 'video_window.html',
							bounces : false,
							vScrollBarEnabled : false,
							animation : {
								type : 'push',
								subType : "from_right",
								duration : "500"
							},
							pageParam : {
								deviceSerial : Serial,
								deviceType : deviceType,
								chon: chon
							}
						});
					}
				}
			});
			var date1 = new Date()
			var s1 = date1.getTime(), s2 = $api.getStorage('sessionTime');
			var total = (s1 - s2) / 1000;
			var day = parseInt(total / (24 * 60 * 60));
			if (isEmpty($api.getStorage('videoaccessToken')) || isEmpty($api.getStorage('sessionTime')) || day > 3) {
				api.ajax({
					url : 'https://open.ys7.com/api/lapp/token/get',
					method : 'post',
					data : {
						values : {
							"appKey" : '45a4d5c6aece4178818da135ed84dbaf',
							"appSecret" : '670fcd955873dc253b106213df288a5b'
						}
					}
				}, function(ret, err) {
					$api.setStorage('videoaccessToken', ret);
					$api.setStorage('sessionTime', new Date().getTime());
					//alert(JSON.stringify(ret))
					//coding...
				});
			};
		}
		function redobd() {
			api.ajax({
				url : 'https://open.ys7.com/api/lapp/token/get',
				method : 'post',
				data : {
					values : {
						"appKey" : '45a4d5c6aece4178818da135ed84dbaf',
						"appSecret" : '670fcd955873dc253b106213df288a5b'
					}
				}
			}, function(ret, err) {
				$api.setStorage('videoaccessToken', ret);
				$api.setStorage('sessionTime', new Date().getTime());
				//alert(JSON.stringify(ret))
				//coding...
			});
		}

		function isEmpty(v) {
			switch (typeof v) {
				case 'undefined':
					return true;
				case 'string':
					if (v.replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g, '').length == 0)
						return true;
					break;
				case 'boolean':
					if (!v)
						return true;
					break;
				case 'number':
					if (0 === v || isNaN(v))
						return true;
					break;
				case 'object':
					if (null === v || v.length === 0)
						return true;
					for (var i in v) {
						return false;
					}
					return true;
			}
			return false;
		}
	</script>
</html>